<template>
  <!-- 逻辑：在这个页面获取数据，通过props传参的方式给各个组件传参 -->
  <div class="report">
    <tableTool>
      <div slot="export">
        <el-button type="primary" @click="excelExport">导出</el-button>
      </div>

      <div class="tool-form" slot="form">
        <div class="input-group">
          <span class="lable">设备名称：</span>
          <el-input placeholder="请输入" v-model="search.equipmentName" />
        </div>
        <div class="input-group">
          <span class="lable">设备类别：</span>
          <el-input
            placeholder="请输入"
            v-model="search.equipmentCategoryName"
          />
        </div>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="success" @click="onReset">重置</el-button>
      </div>
    </tableTool>
    <customTable :list="list" :combined="combined">
      <template v-slot:title>
        <tr>
          <th colspan="16">{{ orgName }}</th>
        </tr>
        <tr>
          <th>设备编号</th>
          <th>设备名称</th>
          <th>规格型号</th>
          <th>操作人员</th>
          <th>设备持有方式</th>
          <th>进场日期</th>
          <th>（预计）退场日期</th>
          <th>进出场费</th>
          <th>维保费</th>
          <th>燃油费</th>
          <th>租赁单价或折旧费</th>
          <th>累计租金（内租）</th>
          <th>累计租金（外租）</th>
          <th>累计租金（临租）</th>
          <th>合同（计划/调动）号</th>
          <th>合同名称</th>
        </tr>
      </template>
      <template #body="{ list }">
        <tr v-for="item in list" :key="item.equipmentSerialNumber">
          <td>{{ item.equipmentSerialNumber }}</td>
          <td>{{ item.equipmentName }}</td>
          <td>{{ item.equipmentModel }}</td>
          <td>{{ item.operatorName }}</td>
          <td>{{ item.leaseType }}</td>
          <td>{{ item.dateOfEntry }}</td>
          <td>{{ item.dateOfDeparture }}</td>
          <td>{{ item.costEntryExit }}</td>
          <td>{{ item.maintenanceHarge }}</td>
          <td>{{ item.fuelCost }}</td>
          <td>{{ item.unitLeasePrice }}</td>
          <td>{{ item.accumulatedRent }}</td>
          <td>{{ item.accumulatedRentOutside }}</td>
          <td>{{ item.accumulatedRentInThe }}</td>
          <td>{{ item.contractNo }}</td>
          <td>{{ item.contractName }}</td>
        </tr>
      </template>
      <template #empty>
        <tr>
          <td colspan="16" class="empty">暂无数据</td>
        </tr>
      </template>
      <template #footer="{ combined }">
        <tr>
          <td>合计</td>
          <td>{{ combined.equipmentName }}</td>
          <td>{{ combined.equipmentModel }}</td>
          <td>{{ combined.operatorName }}</td>
          <td>{{ combined.leaseType }}</td>
          <td>{{ combined.dateOfEntry }}</td>
          <td>{{ combined.dateOfDeparture }}</td>
          <td>{{ combined.costEntryExit }}</td>
          <td>{{ combined.maintenanceHarge }}</td>
          <td>{{ combined.fuelCost }}</td>
          <td>{{ combined.unitLeasePrice }}</td>
          <td>{{ combined.accumulatedRent }}</td>
          <td>{{ combined.accumulatedRentOutside }}</td>
          <td>{{ combined.accumulatedRentInThe }}</td>
          <td>{{ combined.contractNo }}</td>
          <td>{{ combined.contractName }}</td>
        </tr>
      </template>
    </customTable>
    <pagination
      @onCurrentChange="handleCurrentChange"
      :total="page.total"
    ></pagination>
  </div>
</template>
<script>
import tableTool from "../components/tableTool.vue";
import customTable from "../components/customTable.vue";
import pagination from "../components/pagination.vue";
import {
  combinedFn,
  formatTime,
} from "@/pages/comprehensiveReport/equipmentManagement/mixin";
import request from "@/api/comprehensiveReport/equipmentManagement";

export default {
  name: "projectEquipmentStatisticsTableProject",
  components: { tableTool, customTable, pagination },
  data() {
    return {
      list: [],
      page: {
        total: 0,
        currentPage: 1,
        limit: 10,
      },
      search: {
        equipmentCategoryName: "",
        equipmentName: "",
      },
      orgName: this.$route.query.orgName || this.$store.state.userInfo.orgInfo.orgName,
      orgId:
        this.$route.query.orgId || this.$store.state.userInfo.orgInfo.orgId,
      combined: {},
      headers: {
        设备编号: "equipmentSerialNumber",
        设备名称: "equipmentName",
        规格型号: "equipmentModel",
        操作人员: "operatorName",
        设备持有方式: "leaseType",
        进场日期: "dateOfEntry",
        "（预计）退场日期	": "dateOfDeparture",
        进出场费: "costEntryExit",
        维保费: "maintenanceHarge",
        燃油费: "fuelCost",
        租赁单价或折旧费: "unitLeasePrice",
        "累计租金（内租）": "accumulatedRent",
        "累计租金（外租）": "accumulatedRentOutside",
        "累计租金（临租）": "accumulatedRentInThe",
        "合同（计划/调动）号": "contractNo",
        合同名称: "contractName",
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onSearch() {
      this.getList();
      this.onReset();
    },
    onReset() {
      this.search = {
        equipmentCategoryName: "",
        equipmentName: "",
      };
    },
    async getList() {
      const res = await request.getProjectEquipmentCompany({
        orgId: this.orgId,
        pageSize: this.page.limit,
        pageNo: this.page.currentPage,
        orgType: this.$store.state.userInfo.orgInfo.orgType,
        equipmentCategoryName: this.search.equipmentCategoryName, // 查询设备类别
        equipmentName: this.search.equipmentName, // 查询设备名称
      });

      console.log("发送请求，获取数据", res);
      if (res.data == null) {
        this.list = []
        this.combined = {}
        this.page.total = 0
        return;
      }
      this.page.total = res.totalCount;
      const { list, combined } = combinedFn(
        Object.values(this.headers).slice(1),
        formatTime(["dateOfEntry", "dateOfDeparture"], res.data),
        [
          "costEntryExit",
          "maintenanceHarge",
          "fuelCost",
          "unitLeasePrice",
          "accumulatedRent",
          "accumulatedRentOutside",
          "accumulatedRentInThe",
        ]
      );
      this.list = list;
      this.combined = combined;
    },
    handleCurrentChange(currentPage) {
      console.log(`当前页: 第${currentPage}页`);
      this.page.currentPage = currentPage;
      this.getList();
    },
    excelExport() {
      const multiHeader = [
        [
          this.equipmentCategoryName,
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
          "",
        ],
      ];
      const merges = ["A1:O1"];
      import("@/utils/Export2Excel.js").then(async (excel) => {
        const { data: res } = await request.getProjectEquipmentCompany({
          orgId: this.orgId,
          pageSize: this.page.total,
          pageNo: 1,
          orgType: this.$store.state.userInfo.orgInfo.orgType,
        });
        const { list, combined } = combinedFn(
          Object.values(this.headers).slice(1),
          formatTime(["dateOfEntry", "dateOfDeparture"], res),
          [
            "costEntryExit",
            "maintenanceHarge",
            "fuelCost",
            "unitLeasePrice",
            "accumulatedRent",
            "accumulatedRentOutside",
            "accumulatedRentInThe",
          ]
        );
        const data = this.formatJson(this.headers, list); // 转化数据表结构
        // console.log("转换后", data);
        data.push(["合计", ...Object.values(combined)]);
        excel.export_json_to_excel({
          header: Object.keys(this.headers),
          data,
          filename: `设备管理-工程项目设备统计表-${this.equipmentCategoryName}`,
          autoWidth: true,
          bookType: "xlsx",
          multiHeader,
          merges,
        });
      });
    },
    formatJson(headers, list) {
      return list.map((item) => {
        return Object.values(headers).map((value) => {
          return item[value];
        });
      });
    },
  },
};
</script>
<style lang="scss">
</style>
